<template>
  <div>
    <el-form ref="myform" :model="formItem" label-width="160px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="项目名称">
            {{ formItem.projectName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位名称">
            {{ formItem.clientName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="运维组长">
            {{ formItem.operationUserName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驻场工程师">
            {{ formItem.residentEngineerUserName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机动工程师">
            {{ formItem.mobileEngineerUserName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务月">
            {{ formItem.serviceMonth }} 月
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="广域网计划外断网时长(分)">
            {{ formItem.unplannedWanOutageDuration }} 分
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="广域网月可用性(%)">
            {{ formItem.wanMonthlyAvailability }} %
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="局域网计划外断网时长(分)">
            {{ formItem.unplannedLanOutageDuration }} 分
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="局域网月可用性(%)">
            {{ formItem.lanMonthlyAvailability }} %
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外联网计划外断网时长(分)">
            {{ formItem.unplannedExtranetOutageDuration }} 分
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外联网月可用性(%)">
            {{ formItem.extranetMonthlyAvailability }} %
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驻场服务总时长">
            {{ formItem.residentServiceTotalTime }} 分
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="运维时间">
            {{ formatDate(formItem.operationTime, 'YYYY-MM') }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="周报总结">
            <div class="height-div">
              {{ formItem.weeklySummary }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="本月总结">
            <div class="height-div">
              {{ formItem.monthSummary }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="用户满意度">
            <div class="height-div">
              {{ formItem.customerSatisfaction }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="重大事件上报">
            <div class="height-div">
              {{ formItem.majorIncidentReport }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="下月工作计划">
            <div class="height-div">
              {{ formItem.nextMonthWorkPlan }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合理化建议">
            <div class="height-div">
              {{ formItem.reasonableSuggestion }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <div class="height-div">
              {{ formItem.remark }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件">
            <div v-for="fileObj in formItem.attachment" :key="fileObj.fsId">
              <el-link type="primary" :href="downloadFileUrl(fileObj.fsId)" :download="downloadFileUrl(fileObj.fsId)" target="_blank">{{ fileObj.name }}</el-link>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

// 定义一个表单原始项
const formItem = {
  /** 项目名称 */
  projectName: '',
  /** 单位名称 */
  clientName: '',
  /** 单位编码 */
  clientCode: '',
  /** 运维组长名称 */
  operationUserName: '',
  /** 运维组长编码 */
  operationUserCode: '',
  /** 驻场工程师名称 */
  residentEngineerUserName: '',
  /** 驻场工程师编码 */
  residentEngineerUserCode: '',
  /** 机动工程师名称 */
  mobileEngineerUserName: '',
  /** 机动工程师编码 */
  mobileEngineerUserCode: '',
  /** 服务月 */
  serviceMonth: 0,
  /** 广域网计划外断网时长(分) */
  unplannedWanOutageDuration: 0,
  /** 广域网月可用性(%) */
  wanMonthlyAvailability: 0,
  /** 局域网计划外断网时长(分) */
  unplannedLanOutageDuration: 0,
  /** 局域网月可用性(%) */
  lanMonthlyAvailability: 0,
  /** 外联网计划外断网时长(分) */
  unplannedExtranetOutageDuration: 0,
  /** 外联网月可用性(%) */
  extranetMonthlyAvailability: 0,
  /** 驻场服务总时长(分) */
  residentServiceTotalTime: 0,
  /** 运维时间 */
  operationTime: null,
  /** 周报总结 */
  weeklySummary: '',
  /** 本月总结 */
  monthSummary: '',
  /** 用户满意度 */
  customerSatisfaction: '',
  /** 重大事件上报 */
  majorIncidentReport: '',
  /** 下月工作计划 */
  nextMonthWorkPlan: '',
  /** 合理化建议*/
  reasonableSuggestion: '',
  /** 服务工作总次数 */
  serviceTotalNumber: '',
  /** 服务工作总耗时 */
  serviceTotalTime: '',
  /** 备注 */
  remark: ''
}

import { detail } from '@neu/dcom-ui/api/monthWeekly'
import { formatDate } from '@neu/biz-core/utils/utils'
import { downloadFileUrl } from '@neu/dcom-ui/api/workDaily'

export default {
  name: 'BaseViewForm',
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      editId: -1,
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      formatDate,
      downloadFileUrl: downloadFileUrl
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          const data = response.data
          if (data.attachment) {
            const fileJoins = data.attachment.split('||')
            data.attachment = fileJoins.map(it => {
              const fsInfo = it.split('@@')
              return {
                fsId: fsInfo[0],
                name: fsInfo[1]
              }
            })
          } else {
            data.attachment = []
          }
          this.formItem = {
            ...data
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.height-div {
    min-height: 80px;
    max-height: 100px;
}
</style>
